<template>
  <!-- 真空炉 -->
  <div style="position: relative;">
    <div id="equipmentAdminBox" v-init-screen-h="0" class="equipmentAdmin_box">
      <dv-border-box-12
        ref="devRef"
        style="padding:  10px; height: 100%"
        class="msg_content"
      >
        <DeviceSvg></DeviceSvg>
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
import ContentField from "../components/ContentField.vue";
import { renderJson } from "../constant";
import _ from "lodash";
import { generateId } from "@/utils";
import { mapGetters } from "vuex";
import DeviceSvg from "./DeviceSvg.vue";
import { MAP_DEATIL_VACUUM_FURNACE_P800 } from "./constant";
export default {
  components: {
    DeviceSvg,
    ContentField
  },
  data() {
    return {
      brder1Key: generateId()
    };
  },
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened": {
      handler: function(newData, oldData) {
        setTimeout(() => {
          this.$nextTick(() => {
            if (this.$refs.devRef) {
              this.$refs.devRef.initWH();
            }
          });
        }, 500);
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(["area123"]),
    // 获取下一部分
    renderJsonDownArea() {
      console.log("111", this.area123);
      return renderJson(this.area123, MAP_DEATIL_VACUUM_FURNACE_P800)?.downArea;
      return [];
    }
  },
  async mounted() {},
  destroyed() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.filter_ree::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}

.filter_ree::-webkit-scrollbar-track {
  background-color: inherit;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background-color: #5dcbff;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar {
  width: 4px !important;
}
.filter_ree::-webkit-scrollbar-corner {
  /* background-color: #5dcbff; */
  display: none;
}
.equipmentAdmin_box {
  // background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
  //   100%;
  overflow: hidden !important;
  background-size: cover;
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  .msg_content {
    width: 100%;
    height: 100%;
    position: relative;
    .msg_fild_item {
      z-index: 999999;
      height: 100%;
      overflow-y: scroll;
      position: absolute;
      top: 0;
      left: -10px;
    }
  }
  .left {
    width: 16%;
    height: 100%;
  }

  .content {
    height: 100%;
  }

  // .content_bottom {
  // }
}
</style>
